<!--
/**
 *
 * @authors garyzyz (zhouyouzhao@yeah.net)
 * @date    2016-12-13 15:07:16
 * @version $Id$
 */
 -->
<template>
  <div class="recommend-component">
    <div class="main" v-for="(itemW, index) in data">
      <p class="title">{{itemW.title}}</p>
      <ul class="lists">
        <li class="list" v-for="(item, ind) in itemW.data">
          <a class="list-url" :href="item.url">{{item.name}}</a>
        </li>
        <li class="list more-list">
          <a class="list-url" href="http://piao.pandauu.com/single/piao_1_4/public/nproducts.php">...</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  /*
    recommend 配置信息
  */
  const recommendConf = [
    {
      title: '城市 + 玩法',
      data: [
        {
          name: '普吉',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=1',
          icon: ''
        },
        {
          name: '清迈',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=3',
          icon: ''
        },
        {
          name: '巴厘岛',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=5',
          icon: ''
        },
        {
          name: '吴哥',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=6',
          icon: ''
        },
        {
          name: '曼谷',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=7',
          icon: ''
        },
        {
          name: '沙巴',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=4',
          icon: ''
        },
        {
          name: '当地游',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=1',
          icon: ''
        },
        {
          name: '门票',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=5',
          icon: ''
        },
        {
          name: '接送机',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=6',
          icon: ''
        },
        {
          name: '特线',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=9',
          icon: ''
        },
        {
          name: '包车',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=11',
          icon: ''
        },
        {
          name: '班车',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=99',
          icon: ''
        }
      ]
    }
  ];
  export default {
    props: {
      data: {
        type: Array,
        default () {
          return recommendConf;
        }
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .recommend-component{
    margin-top: 10px;
    background-color: #fff;
    .title{
      font-size: 17px;
      padding: 20px 0 15px;
      text-align: center;
    }
    .lists{
      font-size: 0;
      padding: 0 10px;
    }
    .list{
      display: inline-block;
      height: 38px;
      line-height: 38px;
      border-radius: 19px;
      font-size: 15px;
      border: 1px solid #d6d6d6;
      margin: 0 5px 10px 5px;
      &.more-list{
        padding-left: 5px;
        padding-right: 5px;
      }
      .list-url{
        display: block;
        text-align: center;
        padding: 0 12px;
        color: #4a4a4a;
      }
    }
  }
</style>
